<template>
  <view class="container c_box" :class="[device.lang]">
    <view class="rtl">
      <NavBar v-if="!isActivity" bgColor="#004B41" :VehicleSeries="logo" />
      <activityView @prentCheck="activityCheck" />
      <IndexList :carList="carList" @prentCheck="prentCheck" />
      <view class="container-flex" v-if="false">
        <button @click="handleLogin">{{ t("Login") }}</button>
      </view>
      <view class="container-flex" v-else>
        <IndexSearch :classificationId="classificationId" />
      </view>
    </view>
  </view>
</template>

<script setup>
import NavBar from "@/components/NavBar/index.vue";
import activityView from "./components/activityView.vue";
import IndexList from "./components/IndexList.vue";
import IndexSearch from "./components/IndexSearch.vue";
import { onMounted, ref } from "vue";
import { useI18n } from "vue-i18n";

import { useDeviceStore } from "@/store";

import logo from "@/static/images/logo.png";

const { t } = useI18n();
const device = useDeviceStore();
const deviceStore = useDeviceStore();
const handleLogin = () => {
  uni.navigateTo({
    url: "/pages/login/login",
  });
};

const bgColor = ref("#004B41");
const carList = ref([]);
const classificationId = ref(0);
const cartIndex = ref(0);
const isActivity = ref(false);

const activityCheck = (e) => {
  if (e == -1) {
    isActivity.value = false;
  } else {
    isActivity.value = true;
  }
};
// 车系
const prentCheck = (e, index) => {
  cartIndex.value = index;
  carList.value.forEach((item) => {
    item.checked = false;
    if (item.id == e.id) {
      item.checked = true;
    }
  });
};

onMounted(() => {
  console.log(deviceStore.MyShop);
  if (deviceStore.MyShop) {
    let myshop = deviceStore.MyShop;

    bgColor.value = myshop.shopBackgroundColor;

    myshop.shopClassificationRelationList.forEach((item, i) => {
      if (i == 0) {
        classificationId.value = item.classificationId;
        carList.value.push({
          img:
            item.classificationUrl ||
            "https://pic.rmb.bdstatic.com/bjh/news/620fc98a88b1741a58ce4eb3141ef4f3.jpeg",
          checked: true,
          id: item.id,
          carMake: item.carMake,
          classificationId: item.classificationId,
        });
      } else {
        carList.value.push({
          img:
            item.classificationUrl ||
            "https://n.sinaimg.cn/spider2021226/100/w1600h900/20210226/1b5b-kksmnwu3549224.jpg",
          checked: false,
          id: item.id,
          carMake: item.carMake,
          classificationId: item.classificationId,
        });
      }
    });
    // console.log(carList.value)
  }
});
</script>

<style lang="scss" scoped>
@import "@/static/css/index.scss";

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: $primary-h;
}

.container-flex {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: $primary-h;
  padding-bottom: 180rpx;
}
</style>
